<template>
  <div class="register">
    <div class="div1">
      <ArrowLeftBold style="width: 1.5em" @click="tz"></ArrowLeftBold>
    </div>
    <div class="div2">
      <h2>注册账号</h2>
    </div>
    <div class="div3">
      <el-input v-model="username" placeholder="请输入手机号码" />
      <el-input
        v-model="password"
        type="password"
        placeholder="请输入登录密码"
        show-password
      />
      <el-button @click="login">注册</el-button>
      <p>
        <input type="radio" :value="true" v-model="falg" @click="radios" />
        我已阅读并同意《
        <span>用户协议</span>
        》与《
        <span>隐私政策</span>
        》
      </p>
    </div>
  </div>
</template>

<script>
import '../login.css'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import axios from '../request/request'
import { ElMessage } from 'element-plus'
export default {
  setup() {
    const router = useRouter()
    const username = ref('')
    const password = ref('')
    const falg = ref(false)
    const tz = () => {
      router.go(-1)
    }

    const radios = () => {
      if (falg) {
        falg.value = false
      } else {
        falg.value = true
      }
    }

    const login = () => {
      if (falg.value == false) {
        ElMessage.error('未勾选')
      } else {
        axios
          .post(`/adduser`, {
            username: username.value,
            password: password.value,
          })
          .then((res) => {
            if (res.data.code == 200) {
              router.push('/password')
              ElMessage.success('注册成功')
            } else {
              ElMessage.error('该用户已存在')
            }
          })
      }
    }

    const registers = () => {
      router.push('/register')
    }

    return {
      tz,
      username,
      password,
      falg,
      radios,
      login,
      registers,
    }
  },
}
</script>

<style lang="scss" scoped></style>
